<template>
	<view class="my-area">
		<u-input v-model="sValue" type="select" v-bind='attrs' :class="showClearable?'isClearable':''"
			:clearable="props.clearable" @click="onShowArea()">
			<template #right-icon>
				<view class="right-icon-box">
					<text class="clearable-btn" v-if='showClearable' @tap.stop="clearableFu">×</text>
					<text class="drop-down">
						<!-- > -->
					</text>
				</view>
			</template>
		</u-input>
		<u-select v-model="show" mode='mutil-column-auto' :list="listTree" class="my-area-p" :mask-close-able='false'
			@confirm="confirm"></u-select>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		computed,
		useAttrs,
		onMounted
	} from 'vue'
	import {
		onLoad,
		onReady,
		onShow
	} from '@dcloudio/uni-app'

	import {
		areaApi
	} from '@/common/api/area/index.js'
	import {
		handleTree,
		findNodeAndParents,
		strToArr
	} from '@/common/common.js'

	import {
		isEmpty
	} from '@/common/system.js'
	const attrs = useAttrs()

	const props = defineProps({
		// 选中值
		modelValue: {
			type: [String, Number, Object, Array],
			default: null
		},
		// 占位符
		placeholder: {
			type: String,
			default: '请选择'
		},
		// 是否可清除
		clearable: {
			type: Boolean,
			default: false
		},
		// 是否返回多个值
		getMultiple: {
			type: Boolean,
			default: false,
		},
		// 占位符
		valueName: {
			type: String,
			default: 'code'
		},
		// 占位符
		labelName: {
			type: String,
			default: 'name'
		},
	})

	const emit = defineEmits(['update:modelValue', 'change'])
	const selected = computed({
		get: () => {
			if (isEmpty(props.modelValue)) return
			let label = ''
			let mVal = strToArr(props.modelValue)
			let sVal = findNodeAndParents(listTree.value, mVal[mVal.length - 1])

			if (sVal.length == 0) {
				return props.modelValue
			} else {
				let rVal = sVal.map(item => item[props.labelName]).toString()
				return rVal
			}
		},
		set: (val) => {
			emit('change', val)
			emit('update:modelValue', val)
			return
		}
	})
	const sValue = computed(() => {
		return selected.value
	})

	const showClearable = computed(() => {
		return props.clearable && !isEmpty(props.modelValue)
	})

	const show = ref(false)
	const onShowArea = () => {
		show.value = true
		// console.log('show.value=>>>', show.value);
	}

	const listTree = ref([])
	const list = ref([])

	const fNode = 'fAreaId'
	const getData = () => {
		areaApi.page().then(res => {
			list.value = res.data.filter((item) => item.id !== "000000000000").map(item => {
				return {
					...item,
					label: item[props.labelName],
					value: item[props.valueName],
				}
			})
			listTree.value = handleTree(list.value, 'id', fNode)
			// listTree.value = res.data
			console.log('listTree.value=3=》', listTree.value);
		})
	}

	// 清除数据
	const clearableFu = () => {
		emit('change', undefined)
		emit('update:modelValue', undefined)
	}

	const confirm = (val) => {
		if (props.getMultiple) {
			selected.value = val.map(item => {
				return item.value
			})
		} else {
			selected.value = val[val.length - 1].value
		}
		// emit('change', selected.value)
	}

	// watch(() => listTree.value, (val) => {
	// 	console.log('listTree==》', val);
	// }, {
	// 	deep: true
	// })

	onMounted(() => {
		getData()
	})

	onLoad((opt) => {})
	onShow(() => {})
</script>
<style lang='scss' scoped>
	.my-area {
		width: 100%;
		position: relative;

		.isClearable {
			:deep([type="select"]) {
				padding-right: 0.5rem;
			}
		}
	}

	/* 	:deep(.my-select .isClearable .u-input__input.u-input__select) {
		padding-right: 1rem;
	} */
	.right-icon-box {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.drop-down {
		display: inline-block;
		color: #c0c4cc;
		transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		/* IE 9 */
		-webkit-transform: rotate(45deg);
		/* Safari and Chrome */

		:after {
			display: block;
			content: '';
			width: 18rpx;
			height: 18rpx;
			border-top: #c0c4cc 4rpx solid;
			border-right: #c0c4cc 4rpx solid;
		}
	}

	.clearable-btn {
		background-color: #c0c4cc;
		color: #fff;
		border-radius: 500px;
		display: flex;
		justify-content: center;
		/* align-items: center; */
		font-size: 0.85rem;
		width: 1.2rem;
		height: 1.2rem;
		line-height: 1.2rem;
		margin-right: 8rpx;
	}
</style>